<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style>
    .outerDiv {
      display: inline-block;
      width: 160px;
      height: 400px;
      background-color: pink;
    }

    .upperDiv {
      width: 50px;
      height: 50px;
      background-color: red;
    }

    .downDiv {
      width: 50px;
      height: 50px;
      background-color: green;
    }

    #originDiv div {
      width: 160px;
    }

    #targetDiv {

      /* 不设置overflow时，内容会向下溢出，不向右溢出的原因是：行内元素一行显示不完时，会自动换行，但一个单词是一个整体不会拦腰截断换行 */
      /* 如果内部是一个行内块的div，没法换行，也是会向右溢出的 */
      /* overflow: hidden; */

    }

    #contentDiv,#contentDiv2 {
      font-size: 10px;
      line-height: 10px;
      overflow: hidden;
      height: 20px;
      /* padding也算盒子一部分，所以通过背景色看起来高度20px不到父盒子高度50px一半，占比却超过了一半，因为加上了padding的20px */
      padding-bottom: 20px;
      display: inline-block;
      width: 90px;
      /* height: 200px; */
      background-color: yellowgreen;
    }

    #div0 {
      height: 1200px;
      width: 800px;
      background-color: #333;
    }
  </style>
  <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <!-- 从效果上看，这是用inline-block布局，里面有行内元素时的尴尬 -->
  <div id="div0">
    start
    <div class="outerDiv" id="originDiv">
      <div class="upperDiv">

          <!-- contentDiv2与行首尾文字对齐，因为它是行内块，。虽然outerDiv也是行内块 -->
        <div id="contentDiv2">
        </div>
        </div>
      <div class="downDiv"></div>
    </div>
    <div class="outerDiv">
        <!-- contentDiv不设置溢出隐藏时，与行首尾文字对齐的却是里面的文字 -->
      <div class="upperDiv" id="targetDiv">
        <div id="contentDiv">
          <!-- 连续的字母会被当成一个单词，一行放不下时，原本以为会自动换行的行内元素，也不会换行，因为它是一个单词一个整体 -->
          end with b a a a aa a a a a a a a b
          endwithabbbbbbbbbbbbbbbbbbba
          ccccccccccccc
          ddddddddddddd
          eeeeeeeeeeeee
          fffffffffffff
          ggggggggggggg
          hhhhhhhhhhhhh
        </div>
      </div>
      <div class="downDiv"></div>
    </div>
    end
  </div>

</body>

</html>
